iT邦幫忙

2025 iThome 鐵人賽

DAY 14
0

自定義元件的插槽

元件插槽的基本用法

  • 如果要讓自定義元件支援插槽,需要使用slot標籤來指定插槽位置,例如:
const containerComponent = {
    template:'<div style="border-style:solid;border-color:red; border-width:10px">
        <slot></slot>
    </div>'
}
  • 再次執行程式,可以看到my-container標籤內部的內容已經被新增到了自定義元件的插槽位置。執行結果如下圖:
    https://ithelp.ithome.com.tw/upload/images/20251014/201692827emz618y3u.png
  • 雖然範例程式中只是使用文字作為插槽的內容,實際上插槽中也支援任意的標籤內容或其他元件。

上一篇
Day 26
下一篇
Day 28
系列文
從零開始學習TypeScript、Vue.js !!30
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言